<template>
  <div class="list-of-goods" style="margin-top: 60px">
    <el-container>
      <!-- 筛选搜索 -->
      <el-header style="border: 1px solid #ebeef5" height="200px">
        <div style="padding: 20px">
          <div>
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
            <el-button
              type="primary"
              size="mini"
              style="float: right"
              @click="fn"
              >查询结果</el-button
            >
            <el-button
              size="mini"
              style="float: right; margin-right: 15px"
              @click="clear"
              >重置</el-button
            >
          </div>
          <!-- 输入 -->
          <div style="margin-top: 15px">
            <el-form :inline="true" :model="list" class="demo-form-inline">
              <el-form-item label="输入搜索：" style="margin-left: 40px">
                <el-input v-model="list.name" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item label="商品货号：">
                <el-input
                  v-model="list.productSn"
                  placeholder="商品货号"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品分类：">
                <el-cascader
                  v-model="list.productCategoryName"
                  :options="list.options"
                  :props="SetKesDept"
                  @change="handleChange"
                  size="mini"
                  style="width: 202px"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商品品牌：" style="margin-left: 40px">
                <el-select
                  v-model="list.brandId"
                  placeholder="请选择品牌"
                  style="width: 202px"
                >
                  <el-option
                    v-for="item in list.fenlei"
                    :key="item.name"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上架状态：">
                <el-select
                  v-model="list.publishStatus"
                  placeholder="全部"
                  style="width: 202px"
                >
                  <el-option label="上架" value="1"></el-option>
                  <el-option label="下架" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核状态：">
                <el-select
                  v-model="list.verifyStatus"
                  placeholder="全部"
                  style="width: 202px"
                >
                  <el-option label="已审核" value="1"></el-option>
                  <el-option label="未审核" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-header
        style="border: 1px solid #ebeef5; margin-top: 20px; padding: 20px 20px"
      >
        <div>
          <i class="el-icon-s-order"></i>
          <span>数据列表</span>
          <el-button size="mini" style="float: right" @click="tianjia"
            >添加</el-button
          >
        </div>
      </el-header>

      <div>
        <el-footer style="padding: 0; margin-top: 20px">
          <el-table :data="formInline" border algin="center">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="id" label="编号" width="100" align="center">
            </el-table-column>
            <el-table-column
              prop="pic"
              label="商品图片"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :src="scope.row.pic"
                  alt=""
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center" width="240">
              <template slot-scope="scope">
                <p>{{ scope.row.name }}</p>
                <p>品牌：{{ scope.row.brandName }}</p>
              </template>
            </el-table-column>
            <el-table-column label="价格/货号" align="center" width="120">
              <template slot-scope="scope">
                <p style="font-size: 12px">价格：￥{{ scope.row.price }}</p>
                <p style="font-size: 12px">货号：{{ scope.row.productSn }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="list"
              label="标签"
              align="center"
              width="120"
            >
              <el-switch
                value="formInline.publishStatus"
                inactive-text="上架："
              >
              </el-switch>
              <el-switch value="formInline.newStatus" inactive-text="新品：">
              </el-switch>
              <el-switch
                value="formInline.recommandStatus"
                inactive-text="推荐："
              >
              </el-switch>
            </el-table-column>
            <el-table-column
              align="center"
              prop="sort"
              label="排序"
            ></el-table-column>
            <el-table-column prop="" label="SKU库存" align="center">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </el-table-column>
            <el-table-column
              prop="sale"
              label="销量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="verifyStatus"
              label="审核状态"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.verifyStatus == 0">未审核</span>
                <span v-if="scope.row.verifyStatus == 1">已审核</span>
                <el-link type="primary">审核详细</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              align="center"
              width="160"
            >
              <!-- <p style="margin: 15px 0"> -->

              <template slot-scope="scope">
                <el-button size="mini">查看</el-button>
                <el-button size="mini" @click="bianji(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <p style="margin-top: 10px">
                  <el-button size="mini">日志</el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    @click="open(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </p>
              </template>
              <!-- </p> -->
            </el-table-column>
          </el-table>
          <div style="float: left; margin-top: 20px">
            <el-form :inline="true" :model="test" style="width: 215px">
              <el-form-item>
                <el-select v-model="test" placeholder="批量操作">
                  <el-option label="商品上架" value="0"></el-option>
                  <el-option label="商品下架" value="1"></el-option>
                  <el-option label="设为推荐" value="0"></el-option>
                  <el-option label="取消推荐" value="1"></el-option>
                  <el-option label="设为新品" value="0"></el-option>
                  <el-option label="取消新品" value="1"></el-option>
                  <el-option label="转移到分类" value="0"></el-option>
                  <el-option label="移入回收站" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <el-button
            type="primary"
            size="mini"
            style="float: left; margin-top: 25px"
            >确定</el-button
          >
          <div class="block" style="float: right; margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              background=""
            >
            </el-pagination>
          </div>
        </el-footer>
      </div>
    </el-container>
  </div>
</template>
<script>
import "@/assets/ProductList.css";
export default {
  data() {
    return {
      SetKesDept: {
        value: "id",
        label: "name",
        children: "children",
      },
      formInline: [],
      list: {
        publishStatus: "",
        newStatus: "",
        recommandStatus: "",
        name: "",
        brandId: "",
        brandName: "",
        productSn: "",
        publishStatus: "",
        verifyStatus: "",
        value: [],
        options: [
          {
            name: "",
            id: "",
            children: [
              {
                name: "",
                id: "",
              },
            ],
          },
        ],
        fenlei: [
          {
            name: "",
            id: "",
          },
        ],
      },
      page: {
        pageNum: 1,
        pageSize: 5,
      },
      test: {},
    };
  },
  methods: {
    fenlei() {
      let that = this;
      this.$axios.get("/brand/listAll").then(function (res) {
        console.log(res);
        that.list.fenlei = res.data.data;
        console.log(that.list.fenlei);
      });
    },
    classification() {
      let that = this;
      this.$axios
        .get("/productCategory/list/withChildren")
        .then(function (res) {
          that.list.options = res.data.data;
          console.log(that.list.options);
        });
    },
    open(index) {
      let del = this.formInline[index].id;
      console.log(del);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/product/update/deleteStatus?deleteStatus=1&ids=" + del, {})
            .then(function (res) {});
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    tianjia() {
      this.$router.push("/AddProduct");
    },
    bianji(index, row) {
      console.log(index, row);
      this.$router.push({
        name: "addProduct",
        params: {
          num: index.id,
        },
      });
    },
    handleChange(value) {
      console.log(value);
    },
    onSubmit() {
      console.log("submit!");
    },
    clear() {
      this.list.publishStatus = "";
      this.list.newStatus = "";
      this.list.recommandStatus = "";
      this.list.name = "";
      this.list.brandId = "";
      this.list.brandName = "";
      this.list.productSn = "";
      this.list.publishStatus = "";
      this.list.verifyStatus = "";
      this.list.productCategoryName = "";
    },
    fn() {
      let that = this;
      this.$axios
        .get("/product/list", {
          params: {
            keyword: this.list.name,
            brandId: this.list.brandId,
            productSn: this.list.productSn,
            publishStatus: this.list.publishStatus,
            verifyStatus: this.list.verifyStatus,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize,
          },
        })
        .then(function (res) {
          console.log(res);
          that.formInline = res.data.data.list;
          that.page = res.data.data;
          console.log(that.formInline);
          console.log(that.formInline[0].newStatus);
        });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.fn();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.fn();
    },
  },
  mounted() {
    this.classification();
    this.fn();
    console.log();
    this.fenlei()
  },
  watch: {
    pageNum: function () {
      this.fn();
    },
    pageSize: function () {
      this.fn();
    },
  },
};
</script>

